Gracias por adelantado. Cambié el nombre de la clase en JavaScript, pero no cambia. [html]
<button id={{ product.id }} data-product={{ product.id }} data-action='add' class="btn btn-outline-secondary add-btn store-cart"> button</button>[javascript]
var storeBtns = document.getElementsByClassName('store-cart') for (i = 0; i < storeBtns.length; i++) { storeBtns[i].addEventListener('click', function(){ document.getElementById(this.dataset.product).class = 'btn-primary'})}Cuando verifico (document.getElementById(this.dataset.product).class agregando una alerta en la línea inferior, aparece "btn-primary", pero esto no se aplica en la página. ¿Qué debo hacer?
También probé con classList.add , pero no funcionó, así que me preguntaba si hay algo más que hacer, como devolver el documento.
Gracias.
classtList.add('class-name') debería ser lo que necesita: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Eso suponiendo que desea agregar btn-primary a las clases que ya están en el elemento.
for (i = 0; i < storeBtns.length; i++) { storeBtns[i].addEventListener('click', function(){ document.getElementById(this.dataset.product).classList.add('btn-primary'); }); }